<template>
  <div class="header-demo">
    <volvo-header
      title="Volvo XC40 纯电版"
      subtitle="建议零售价：¥282,900起"
      buttonText="即刻预约" />
    <div class="car-image">
      <img src="../../assets/image/xc40.png" alt="Volvo XC40 纯电版" />
      <div class="main-title">上手 更来电</div>
      <div class="sub-title">带电出行，安全和自由都该兼顾</div>
      <volvo-description class="description" content="*产品以中国大陆市场实际销售为准" />
      <img class="arrow-icon" src="../../assets/icon/arrow.svg" alt="arrow" />
    </div>
    <volvo-footer />
  </div>
</template>

<script setup>
import VolvoHeader from "../components/header/index.vue";
import VolvoDescription from "../components/description/index.vue";
import VolvoFooter from "../components/footer/index.vue";
</script>

<style lang="scss" scoped>
.header-demo {
  .car-image {
    width: 100%;
    position: relative;

    img {
      width: 100%;
      height: auto;
      display: block;
    }

    .main-title {
      position: absolute;
      top: 577px;
      left: 50%;
      transform: translateX(-50%);
      font-family: Source Han Sans CN;
      font-weight: 700;
      font-size: 24px;
      line-height: 28px;
      color: #FFFFFF;
    }

    .sub-title {
      position: absolute;
      top: 613px;
      left: 50%;
      transform: translateX(-50%);
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 14px;
      line-height: 22px;
      white-space: nowrap;
      color: #FFFFFF;
    }

    .description {
      position: absolute;
      top: 684px;
      left: 50%;
      transform: translateX(-50%);
    }

    .arrow-icon {
      position: absolute;
      top: 698px;
      left: 50%;
      transform: translateX(-50%);
      width: 32px;
      height: 32px;
    }
  }
}
</style>
